
.common-box-shadow {
  box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.25);
}

//padding xy 1-10
@for $i from 1 through 10 {
  .padding-xy-#{$i} {
    padding: #{$i}px;
    box-sizing: border-box;
  }
  .padding-x-#{$i} {
    padding: #{$i}px;
    box-sizing: border-box;
  }
  .padding-y-#{$i} {
    padding: #{$i}px;
    box-sizing: border-box;
  }

}


//文字超出隐藏
@for $i from 1 through 10 {
  .text-hidden-#{$i} {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: #{$i}; /* 控制显示几行 */
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.flex-row {
  display: flex;
  flex-direction: row;

}

.flex-col {
  display: flex;
  flex-direction: column;
}

@for $i from 5 through 10 {
  .gap-x-#{$i} {
    gap: 0 #{$i}px
  }
  .gap-y-#{$i} {
    gap: #{$i}px 0
  }
  .gap-xy-#{$i} {
    gap: #{$i}px #{$i}px
  }
}

//宽高百分比
@each $size in (10, 25, 33, 50, 66, 75, 100) {
  .w-p-#{$size} {
    width: #{$size}+"%"
  }
  .h-p-#{$size} {
    height: #{$size}+"%"
  }
}

@for $i from 1 through 10 {
  .w-#{$i*50} {
    width: #{$i*50}px;
  }
  .h-#{$i*50} {
    height: #{$i*50}px;
  }
}

@each $color in (
        "red",
        "orange",
        "yellow",
        "green",
        "blue",
        "indigo",
        "purple",
        "pink",
        "brown",
        "grey",
        "gray",
        "black",
        "white",
        "teal",
        "cyan",
        "lime",
        "olive",
        "maroon",
        "navy",
        "fuchsia"
) {
  .border-#{$color} {
    border: 1px solid #{$color};
  }
}
